<template>
    <div class="market">
        <header>商品分类</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="market_type">
                        <span>所属门店：</span>
                        <el-select v-model="value1" placeholder="请选择" style="width:300px;" @change="getCompId()">
                            <el-option v-for="item in options1" :key="item.value" :label="item.SHOPNAME" :value="item.SHOPNAME">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="danger" style="background:#e7251a;" @click="searchShopType">查询</el-button>
                </div>
                <div class="add_market">
                    <el-button type="danger" style="background:#e7251a;" @click="addClassify">新增分类</el-button>
                    <el-button @click="typeSelectSwitch(1)">批量启用</el-button>
                    <el-button @click="typeSelectSwitch(0)">批量停用</el-button>
                </div>
                <div class="selected" v-if="selectArr.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="tables">
                    <el-table :data="tableDatas" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50">
                        </el-table-column>
                        <el-table-column prop="SORTNUM" label="顺序" width="180">
                        </el-table-column>
                        <el-table-column prop="SHOPNAME" label="所属门店" width="300">
                        </el-table-column>
                        <el-table-column prop="SUBJECT" label="分类名称" width="300">
                        </el-table-column>
                        <el-table-column prop="STATUS" label="状态" width="300">
                            <template slot-scope="scope">
                                <span v-if="scope.row.STATUS==1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/dot_green.png" width="16" heigth="16" alt="" />启用
                                </span>
                                <span v-if="scope.row.STATUS==0" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/dot_red.png" width="16" heigth="16" alt="" />停用
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="STATUS" label="操作" width="300">
                            <template slot-scope="scope">
                                <span class="editStatus" @click="typeSwitch(scope.row.CAFETYPEID,scope.row.STATUS)">{{ scope.row.STATUS == 1 ? '停用' : '启用'}}</span>
                                <span class="edits" @click="goEdit(scope.row)">编辑</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[6, 12, 18]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getSelectShop, cafeTypeList, cafeTypeUptoDown } from "@/api/manages";
export default {
    name: "market",
    data() {
        return {
            value1: "", //所属门店
            compID: "",
            loading: true, // loading开关
            options1: [],
            tableDatas: [],
            currentPage4: 1,
            pageSize: 6,
            count: 0,
            selectArr: [] //已选择的数组集合
        };
    },
    computed: {
        selectTypeId() {
            let typeId = [];
            this.selectArr.forEach(item => {
                typeId.push(item.CAFETYPEID);
            });
            return typeId;
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.selectArr = val;
        },
        handleSizeChange(val) {
            // 存储条目数
            this.pageSize = val;
            // 调用跳转方法重新获取数据
            this.handleCurrentChange(this.currentPage4);
        },
        handleCurrentChange(val) {
            // 存储当前页数
            this.currentPage4 = val;

            // 打开 loading
            this.loading = true;

            // 获取分类列表
            this.getTypeList({
                PAGE_NO: this.currentPage4,
                PAGE_SIZE: this.pageSize,
                COMPID:this.compID
            });
        },
        //编辑商品分类
        goEdit(goods) {
            this.$store.commit("editGoods",goods)
            this.$router.push({ path: "/manages/editGoods" });
        },
        addClassify(){
            this.$store.commit("editGoods",{})
            this.$router.push({ path: "/manages/editGoods" });
        },
        // 获取商品分类
        getTypeList(query) {
            this.loading = true;
            cafeTypeList(query).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.tableDatas = res.data.CAFETYPARR;
                    this.count = res.data.COUNT;
                    this.loading = false;
                }
            });
        },
        // 搜索门店分类
        searchShopType() {

            // 获取当前选择的门店ID
            let compID = "";
            this.options1.forEach(item => {
                if (item.SHOPNAME === this.value1) {
                    compID = item.COMPID;
                }
            });
            this.getTypeList({
                PAGE_NO: "1",
                PAGE_SIZE: this.pageSize,
                COMPID: compID
            });
        },
        getCompId(){
            // 获取选择的当前门店ID
            this.options1.forEach(item => {
                if (item.SHOPNAME === this.value1) {
                    this.compID = item.COMPID;
                }
            });
        },
        // 启用/停用
        typeSwitch(id, status) {
            // 分类状态码取反
            let curStatus = Number(!status);

            cafeTypeUptoDown({
                CAFETYPEIDS: id,
                STATUS: curStatus
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.tableDatas.forEach(item => {
                        if (item.CAFETYPEID === id) {
                            item.STATUS = curStatus;
                            this.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            return;
                        }
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
        // 分类批量启用停用
        typeSelectSwitch(status) {
            if (this.selectArr.length === 0) {
                this.$alert("请选择分类", {
                        confirmButtonText: "确定"
                    });
                return;
            }
            cafeTypeUptoDown({
                CAFETYPEIDS: this.selectTypeId.join(),
                STATUS: status
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    // 更新本地数据
                    this.tableDatas.forEach((item, index) => {                    	
                        if (item.CAFETYPEID === this.selectTypeId[index]) {
                            item.STATUS = status;
                            this.$message({
                                message: "批量操作成功",
                                type: "success"
                            });
                            return;
                        }
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        }
    },
    created() {
        // 载入时获取门店下拉列表数据
        getSelectShop({
            LIKESTR: "",
            PAGE_NO: "1",
            PAGE_SIZE: "100"
        }).then(res => {
            if (res.data.STATUS_CODE === 1) {
                this.options1 = res.data.SHOPARR;
                this.value1 = this.options1[0].SHOPNAME
                this.compID = this.options1[0].COMPID
                this.searchShopType()
            }
        });

        // 载入时获取商品分类列表
        this.getTypeList({
            PAGE_NO: this.currentPage4,
            PAGE_SIZE: this.pageSize
        });
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.market {
    header {
        background: #fff;
        font-size: 22px;
        font-weight: 700;
        padding: 20px;
    }
    .contents {
        width: 97%;
        margin: 25px auto;
        padding: 25px;
        background: #fff;
        .conditions {
            span {
                white-space: nowrap;
            }
            .condition_1 {
                display: flex;
                .market_type {
                    margin-right: 60px;
                }
            }
            .add_market {
                margin: 25px 0;
            }
            .selected {
                margin-top: 15px;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .tables {
                margin-top: 15px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .editStatus,
                .edits {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>
